<template>
	<!-- 费用设置 -->
	<view class="main">
		<view class="top_tou">
			<view class="left_" @tap="fanLastPage">
				<image src="../../images/aliang/navigation.png" mode="aspectFill"></image>
			</view>
			<view class="center_"> 费用设置 </view>
			<view class="right_"></view>
		</view>
		<!-- 是否收费付费 -->
		<view class="payMoney">
			<view class="top_choose">
				<view :class="[is_money ? 'one_ active' : 'one_']" @tap="handleOpenMoney">
					付费圈子
					<image src="../../images/aliang/xian_choose.png" mode="aspectFill" v-if="is_money"></image>
					<image src="../../images/aliang/xuan_noChoose.png" mode="aspectFill" v-if="!is_money"></image>
				</view>
				<view :class="[is_money ? 'two_ ' : 'two_ active']" @tap="handleCloseMoney">
					免费圈子
					<image src="../../images/aliang/xian_choose.png" mode="aspectFill" v-if="!is_money"></image>
					<image src="../../images/aliang/xuan_noChoose.png" mode="aspectFill" v-if="is_money"></image>
				</view>
			</view>
			<view v-if="is_money">
				<view class="text_ti"> 设置加入费用 </view>

				<view :class="charge ? 'money_input money_input1' : 'money_input'">
					<text>￥</text>
					<input text="number" :value="charge" @input="handleInput1" :maxlength="maxlength" class="input1"
						placeholder="请输入加入费" placeholder-style="font-size:32rpx;color:#999;" />

					<!-- <input type="number"  v-model="charge"  placeholder="请输入加入费"  placeholder-style="font-size:32rpx;color:#999;"  class="input2" v-if="!charge" /> -->
				</view>
				<view class="xian_hei"> </view>
			</view>
		</view>
		<view v-if="is_money">
			<view class="xian_hui"> </view>
			<view class="three" @tap="handleShow">
				<view class="content">
					<view class="left"> 收费周期 ： </view>
					<view class="right">
						<text>{{ period }}</text>
						<image src="../../images/aliang/you_.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="four">
				<view class="title"> 请选择邀请返利模式 : </view>
				<view class="list_">
					<view class="item" v-for="(item, index) in fenxiaoList" :key="index" @tap="handleIndex(index)">
						<image src="../../images/aliang/weixuan.png" mode="aspectFill" v-if="!item.is_show"></image>
						<image src="../../images/aliang/xuanzhongX.png" mode="aspectFill" v-if="item.is_show"></image>
						<text>{{ item.item }}</text>
					</view>
				</view>
			</view>
			<view class="two" v-if="activeIndex != 0">
				<view class="content1">
					<view class="left"> 一级佣金比例 : </view>
					<view class="right">
						<input text="number" v-model="scale" :value="scale" @input="handleInput2"
							:maxlength="maxlength3" /><text>％</text>
					</view>
				</view>
			</view>
			<view class="footer_zhu">
				注：您可获得收费金额的<text>{{ 100 - scale }}％</text>，成功邀请他人加入圈子的用户可获得剩余的<text>{{ scale }}％</text>
			</view>
			<view class="footer_Name">
				作为本圈的建立者，圈主应当履行群组管理责任，依据法律法规、用户协议和平台公约，规范群组网络行为和信息发布，构建文明有序的网络群体空间。建立收费圈，应提供相应价值的管理服务与责任，对圈子和圈友负责。
			</view>
		</view>
		<view class="bao_btn">
			<text @tap="handleSave">确认</text>
		</view>
		<!-- 收费周期弹窗 -->
		<view class="cycle_set" v-if="is_cycle">
			<view class="content">
				<view class="top">
					<view class="quxiao" @tap="handleQuxiao"> 取消 </view>
					<view class="queding" @tap="handleQueding"> 确定 </view>
				</view>
				<view class="row row1" @tap="handleOne">
					<image src="../../images/aliang/xuanzhong1.png" mode="aspectFill" v-if="is_one"></image>
					<image src="../../images/aliang/weixuan.png" mode="aspectFill" v-if="!is_one"></image>
					<view class="text"> 一次性收费 </view>
				</view>
				<view class="row" @tap="handleTwo">
					<image src="../../images/aliang/xuanzhong1.png" mode="aspectFill" v-if="is_two" class="img"></image>
					<image src="../../images/aliang/weixuan.png" mode="aspectFill" class="img" v-if="!is_two"></image>
					<view class="text">
						按天数收费
						<input text="number" v-model="input_" :value="input_" @input="handleInput"
							:maxlength="maxlength1" />
						天
					</view>
				</view>
			</view>
		</view>
		<!-- 实名认证弹窗 -->
		<view class="markReal" v-if="isReal">
			<view class="content_real">
				<image src="../../imges/cha.png" mode="aspectFill" @tap="handleCloseReal"></image>
				<view class="name name1"> 如果要修改为付费圈子， </view>
				<view class="name"> 需先在一起来往APP完成实名认证 </view>
				<view class="btn_" @tap="handleApp" v-if="openApp.phone == 'ios'">
					去认证
				</view>
				<view class="toapp_" v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'">
					去认证
					<view style="width: 100%;height: 80rpx;position: absolute;top: 0;left: 0;">
						<wx-open-launch-app id="launch-btn" appid="wx8737e94836340f56" @error="closeshiming()"
							@launch="openApp.handleLaunchFn" :extinfo="activeExtinfoid">
							<script type="text/wxtag-template">
								<style>
										.rz{
											display: block;
											width: 283px;
											height: 40px;
										}
				                    </style>
									<view class="rz"></view>
								</script>
						</wx-open-launch-app>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
import "../../utils/toApp.js";
let jweixin = require("jweixin-module"); //引入配置
import request from "../../utils/request.js";
export default {
  data() {
    return {
      extinfoid: "", //安卓分享的链接
      isReal: false,
      isRealOne: true,
      myUserAuthStatus: 2,
      is_money: 1, //控制是否收费
      input_: "", //收费周期
      is_cycle: false, //控制是否打开收费周期
      scale: 0, //分销比例
      charge: "", //收费金额
      period: "设置收费周期",
      fenxiaoList: [
        {
          item: "无需返利",
          is_show: true,
        },
        {
          item: "一级返利",
          is_show: false,
        },
      ],
      is_one: true, //一次性收费
      is_two: false, //按天收费
      activeIndex: 0, //是否返利
      chargeType: 1, //按什么收费
      id: "", //圈子id
      maxlength: 8,
      maxlength1: 4,
      maxlength3: 2,
      scaleMoney: 0,
      maxMoney: "",
      isIos: false,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail();
    this.maxjine();
  },
  onShow() {
    this.handleIsReal();
    this.configWeiXin();
    this.isReal = false;
  },
  methods: {
    handleIsRealOne() {
      this.isRealOne = false;
    },
    handleApp() {
      //唤醒iosAPP
      this.isIos = true;
      this.isRealOne = false;
      uni.showLoading({
        title: "加载中，请稍等",
      });
      setTimeout(() => {
        uni.hideLoading();
      }, 2000);
      var url = window.location.href.split("&code")[0];
      window.history.pushState({}, 0, url);
      this.openApp.toApps(19, "", "", "", "");
    },
    configWeiXin() {
      //唤醒安卓APP
      //获取公众号配置
      let token = uni.getStorageSync("token");
      this.request({
        //获取appid
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
            openTagList: ["wx-open-launch-app"],
          });
          jweixin.ready(function () {});
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
      if (this.openApp.iswx == "wx" && this.openApp.phone == "Android") {
        this.extinfoid = `yqlw://yilaiwang.com/openDetail?jumpType=19&serviceId=''&type=''&orgId=''&content=''`;
      }
    },
    handleIsReal() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/userInformation/faceAuthFlag",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            this.myUserAuthStatus = res.data.data.myUserAuthStatus;
            // this.myUserAuthStatus = 1
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleCloseReal() {
      //关闭实名认证
      this.isReal = false;
      this.isRealOne = false;
    },
    maxjine() {
      let token = uni.getStorageSync("token");
      const that = this;
      request({
        url: "h5/home/listBydictType?uid=",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          dictType: "FRIENDS_LIMIT",
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.maxMoney = res.data.data[0].dictValue.toString();
        } else if (res.data.code == 401) {
          uni.showToast({
            title: "登录失效，请重新授权登录！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    handleInput2(e) {
      //分佣比列
      if (
        e.detail.value &&
        e.detail.value.search(/[^\d{1,}\d{1,}|\d{1,}]/g) != -1
      ) {
        e.detail.value = 0;
      }
      e.detail.value =
        e.detail.value && e.detail.value.replace(/[^\d{1,}\d{1,}|\d{1,}]/g, "");
      if (e.detail.value == 0) {
        setTimeout(() => {
          this.maxlength3 = -1;
          this.scale = "";
          this.scaleMoney = "";
          return false;
        }, 10);
      }
      if (e.detail.value[0] == 0) {
        setTimeout(() => {
          this.maxlength3 = -1;
          this.scale = "";
          this.scaleMoney = "";
        }, 10);
      }
      this.maxlength3 = 2;
      if (Number(e.detail.value) > 50) {
        uni.showToast({
          title: "分佣比例不可超过50%",
          duration: 1500,
          icon: "none",
        });
        this.scale = 50;
        this.scaleMoney = 50;
        return false;
      }
      this.scaleMoney = e.detail.value.trim();
    },
    handleInput1(e) {
      //加入费用
      if (
        e.detail.value &&
        e.detail.value.search(/[^\d{1,}\.\d{1,}|\d{1,}]/g) != -1
      ) {
        e.detail.value = 0;
      }
      e.detail.value =
        e.detail.value &&
        e.detail.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, "");
      if (e.detail.value == 0) {
        setTimeout(() => {
          this.maxlength = -1;
          this.charge = "";
          return false;
        }, 10);
      }
      if (e.detail.value[0] == 0) {
        setTimeout(() => {
          this.maxlength = -1;
          this.charge = "";
        }, 10);
      }

      this.maxlength = 8;
      var result = "";
      if (e.detail.value && e.detail.value.indexOf(".") != -1) {
        result = e.detail.value.substring(
          e.detail.value.indexOf(".") + 1,
          e.detail.value.length
        );
      }
      if (result.length == 2) {
        this.maxlength = e.detail.value.length;
      }
      this.charge = e.detail.value;
      // this.charge = e.detail.value.trim();
      if (Number(e.detail.value) > Number(this.maxMoney)) {
        this.maxlength = this.maxMoney.length;
        this.charge = this.maxMoney;
      }
      if (Number(e.detail.value) === 0) {
        this.maxlength = 1;
        this.charge = "";
      }
    },
    handleSave() {
      if (this.myUserAuthStatus != 2 && this.is_money == 1) {
        if (this.isRealOne) {
          this.isReal = true;
          return false;
        }
      }
      if (this.is_money && this.charge == 0) {
        uni.showToast({
          title: "请输入收费金额",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.charge < 1 && this.is_money) {
        uni.showToast({
          title: "圈子收费最低1元",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      if (Number(this.charge) > Number(this.maxMoney) && this.is_money) {
        uni.showToast({
          title: "圈子收费最高" + this.maxMoney + "元",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      if (this.period == "设置收费周期" && this.is_money) {
        uni.showToast({
          title: "请设置收费周期",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      // if (this.activeIndex == 0) {
      // 	this.scale = "";
      // }
      //点击保存事件
      if (this.scale > 50 && this.activeIndex == 1 && this.is_money) {
        uni.showToast({
          title: "分销比例不可超过50%",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      //正则判断不能为小数
      var rZheng = /^\+?[1-9][0-9]*$/;
      if (!rZheng.test(this.scale) && this.activeIndex == 1 && this.is_money) {
        uni.showToast({
          title: "分销比例不可设置小数",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/setCirclePay",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.id,
            chargeType: this.chargeType,
            chargeAmount: Number(this.charge),
            chargeCycle: Number(this.input_),
            firstDistributionRatio:
              this.activeIndex == 1 ? Number(this.scale) : "",
            secondDistributionRatio: "",
            chargeStatus: this.is_money,
            isDistribution: this.activeIndex,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            uni.showToast({
              title: "收费设置保存成功",
              duration: 1500,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    getDetail() {
      //获取详情
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/getCirclePayInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.id,
          },
        }).then((res) => {
          // console.log(res, '详情')
          if (res.data.code == 200) {
            // this.is_money = res.data.data.chargeStatus;
            if (res.data.data.chargeStatus == 1) {
              this.is_money = 1;
            } else {
              this.is_money = 0;
              return false;
            }

            this.activeIndex = res.data.data.isDistribution;

            this.fenxiaoList.forEach((v) => {
              v.is_show = false;
            });
            this.fenxiaoList[res.data.data.isDistribution].is_show = true;
            this.input_ = res.data.data.chargeCycle; //收费天数
            this.charge = res.data.data.chargeAmount;
            var chargeAmount = String(res.data.data.chargeAmount);
            var resultNum = "";
            if (chargeAmount.indexOf(".") != -1) {
              resultNum = chargeAmount.substring(
                chargeAmount.indexOf(".") + 1,
                chargeAmount.length
              );
            }
            if (resultNum.length == 2) {
              this.maxlength = chargeAmount.length;
            }
            this.chargeType = res.data.data.chargeType;
            this.scale = res.data.data.firstDistributionRatio; //一级分销
            if (res.data.data.chargeType == 2) {
              this.chargeType = 2;
              this.period = res.data.data.chargeCycle + "天";
              this.is_one = false;
              this.is_two = true;
            } else {
              this.chargeType = 1;
              this.period = "一次性收费";
              this.is_one = true;
              this.is_two = false;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    fanLastPage() {
      //返回上一页
      if (this.isIos) {
        window.history.go(-2);
      } else {
        window.history.go(-1);
      }
    },
    handleCloseMoney() {
      //关闭收费圈子
      this.is_money = 0;
    },
    handleOpenMoney() {
      //打开收费圈子
      this.is_money = 1;
    },
    handleIndex(index) {
      //返利方式切换
      // if (index == 2) {
      // 	uni.showToast({
      // 		title: "二级返利暂未上线",
      // 		duration: 1500,
      // 		icon: "none",
      // 	});
      // 	return false;
      // }
      // var scaleMoney = this.scale
      this.activeIndex = index;
      this.fenxiaoList.forEach((v) => {
        v.is_show = false;
      });
      if (index == 0) {
        this.scale = 0;
      } else {
        this.scale = this.scaleMoney;
      }
      this.fenxiaoList[index].is_show = true;
    },
    handleShow() {
      //收费周期弹窗
      this.is_cycle = true;
    },
    handleQuxiao() {
      //取消周期弹窗
      this.is_cycle = false;
    },
    handleQueding() {
      //确定周期弹窗
      if (this.is_one && !this.is_two) {
        this.period = "一次性收费";
        this.is_cycle = false;
      } else {
        if (this.input_.trim() == "") {
          uni.showToast({
            title: "请填写天数",
            duration: 1500,
            icon: "none",
          });
          return false;
        } else if (!/(^[1-9]\d*$)/.test(this.input_)) {
          uni.showToast({
            title: "输入天数格式有误",
            duration: 1500,
            icon: "none",
          });
          return false;
        } else {
          this.period = this.input_ + "天";
          this.is_cycle = false;
        }
      }
    },
    handleOne() {
      //点第一选项
      this.chargeType = 1;
      if (this.is_one == true) {
        return;
      } else {
        this.is_one = true;
        this.is_two = false;
      }
    },
    handleTwo() {
      //点第二选项
      this.chargeType = 2;
      if (this.is_two == true) {
        return;
      } else {
        this.is_one = false;
        this.is_two = true;
      }
    },
    handleInput(e) {
      //输入框的值
      if (
        e.detail.value &&
        e.detail.value.search(/[^\d{1,}\d{1,}|\d{1,}]/g) != -1
      ) {
        e.detail.value = 0;
      }
      e.detail.value =
        e.detail.value && e.detail.value.replace(/[^\d{1,}\d{1,}|\d{1,}]/g, "");
      if (e.detail.value == 0) {
        setTimeout(() => {
          this.maxlength1 = -1;
          this.input_ = "";
          return false;
        }, 10);
      }
      if (e.detail.value[0] == 0) {
        setTimeout(() => {
          this.maxlength1 = -1;
          this.input_ = "";
        }, 10);
      }
      this.maxlength1 = 4;
      var result = "";
      if (e.detail.value && e.detail.value.indexOf(".") != -1) {
        result = e.detail.value.substring(
          e.detail.value.indexOf(".") + 1,
          e.detail.value.length
        );
      }
      if (Number(e.detail.value) > 1000) {
        uni.showToast({
          title: "收费周期需低于1000天",
          duration: 1500,
          icon: "none",
        });
        this.input_ = 1000;
        return false;
      }
      // this.input_ = e.detail.value.trim();
    },
    // handleMoney(e) {
    // 	if (Number(e.detail.value) > 50000) {
    // 		uni.showToast({
    // 			title: "收费金额上限5万",
    // 			duration: 1500,
    // 			icon: "none",
    // 		});
    // 	}
    // 	this.charge = e.detail.value
    // }
  },
};
</script>

<style lang="less" scoped>
.markReal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 750rpx;
  height: 100vh;
  opacity: 1;
  background: rgba(0, 0, 0, 0.4);
  z-index: 66;
  box-sizing: border-box;

  .content_real {
    width: 614rpx;
    height: 410rpx;
    opacity: 1;
    background: #ffffff;
    border-radius: 8rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 445rpx;
    padding-left: 24rpx;
    box-sizing: border-box;

    > image {
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      right: 30rpx;
      top: 30rpx;
    }

    .name {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
      line-height: 50rpx;
    }

    .name1 {
      margin-top: 101rpx;
    }

    .btn_ {
      width: 566rpx;
      height: 80rpx;
      opacity: 1;
      background: #0f6ede;
      border-radius: 8rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
      position: absolute;
      bottom: 36rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    .toapp_ {
      width: 566rpx;
      height: 80rpx;
      background: #0f6ede;
      border-radius: 8rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
      position: relative;
      margin-top: 93rpx;
    }
  }
}

.footer_Name {
  margin-top: 20rpx;
  padding: 0 36rpx;
  opacity: 1;
  font-size: 24rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: justify;
  color: #999999;
  line-height: 33rpx;
}

.footer_zhu {
  border-top: 1rpx solid #f1f1f1;
  background-color: #fff;
  // padding: 0 36rpx;
  padding-top: 24rpx;
  font-size: 24rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #999999;
  line-height: 33rpx;
  width: 678rpx;
  margin-left: 36rpx;

  // box-sizing: border-box;
  text {
    color: #db361f;
  }
}

.main {
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff !important;
  width: 750rpx;
  padding-top: 92rpx;

  .xian_hui {
    width: 750rpx;
    height: 16rpx;
    background: #f1f1f1;
  }

  .payMoney {
    padding: 60rpx 35rpx;
    background-color: #fff;

    .xian_hei {
      width: 680rpx;
      height: 0.5px;
      background-color: #979797;
      // border-bottom: 1px solid #979797;
    }

    .money_input {
      background-color: #fff;
      align-items: center;
      display: flex;
      justify-content: center;
      font-size: 48rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #000000;
      height: 67rpx;
      margin-bottom: 10rpx;

      .input1 {
        font-size: 48rpx;
        width: 200rpx;
      }
    }

    .money_input1 {
      margin-left: 130rpx;
    }

    .text_ti {
      font-size: 32rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #000000;
      line-height: 45rpx;
      padding: 50rpx;
    }

    .top_choose {
      width: 100%;
      display: flex;
      justify-content: space-around;

      .one_,
      .two_ {
        position: relative;

        image {
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          top: 26rpx;
          right: 21rpx;
          z-index: 66;
        }
      }

      .two_,
      .one_ {
        width: 295rpx;
        height: 189rpx;
        border: 1rpx solid #979797;
        border-radius: 12rpx;
        box-sizing: border-box;
        line-height: 189rpx;
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #000;
        position: relative;
        z-index: 66;
      }

      .active {
        width: 300rpx;
        height: 189rpx;
        background: #0f6ede;
        border-radius: 12rpx;
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        line-height: 189rpx;
      }
    }
  }

  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }

  // height: calc(100vh - 100rpx);
  width: 100vw;
  background-color: #f9f9f9;

  .two {
    background-color: #fff;
    padding: 0 30rpx;

    .content {
      border-bottom: 2rpx solid #eee;
    }

    .content1 {
      border-top: 2rpx solid #eee;
    }

    .content,
    .content1 {
      display: flex;
      // width: 100%;
      justify-content: space-between;
      align-items: center;
      height: 110rpx;
      box-sizing: border-box;

      .left {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      .right {
        height: 100%;
        display: flex;
        align-items: center;
        width: 78rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
      }
    }
  }

  .cycle_set {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100vw;
    height: 130vh;
    // height: calc(100vh - 100rpx);
    z-index: 6666;

    .content {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      width: 750rpx;
      height: 800rpx;
      z-index: 9999;

      .top {
        padding: 35rpx 34rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
      }

      .row1 {
        padding-top: 70rpx;
        padding-bottom: 30rpx;
        width: 100%;
        border-top: 2rpx solid #ccc;
      }

      .row {
        display: flex;
        align-items: center;

        image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin-right: 47rpx;
          margin-left: 189rpx;
        }

        .img {
          position: relative;
          bottom: -7rpx;
        }

        .text {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;

          input {
            margin: 0 5rpx;
            padding: 0 4rpx;
            box-sizing: border-box;
            width: 62rpx;
            display: inline-block;
            height: 33rpx;
            border-bottom: 2rpx solid #ccc;
            position: relative;
            bottom: -8rpx;
          }
        }
      }
    }
  }
}

.four {
  background-color: #fff;
  padding: 32rpx 35rpx;

  .title {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .list_ {
    display: flex;
    margin-top: 20rpx;
    // justify-content: space-between;
    align-items: center;

    .item {
      display: flex;
      align-items: center;
      // justify-content: center;
      width: 40%;

      image {
        margin-top: 3rpx;
        width: 34rpx;
        height: 34rpx;
        border-radius: 50%;
        margin-right: 6rpx;
      }

      text {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}

.three {
  background-color: #fff;
  padding: 0 35rpx;

  box-sizing: border-box;

  .content {
    box-sizing: border-box;
    height: 110rpx;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #eee;
  }

  .left {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
  }

  .right {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;

    image {
      margin-left: 10rpx;
      height: 23rpx;
      width: 20rpx;
    }
  }
}

.bao_btn {
  margin-top: 43rpx;
  width: 750rpx;
  height: 100rpx;
  opacity: 1;
  background: #ffffff;
  padding: 10rpx 36rpx;
  padding-bottom: 78rpx;
  box-sizing: border-box;

  text {
    width: 678rpx;
    height: 80rpx;
    opacity: 1;
    background: #0f6ede;
    border-radius: 8rpx;
    // margin: 0 auto;
    display: inline-block;
    line-height: 80rpx;
    text-align: center;
    opacity: 1;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }
}
</style>
